<template>
    <div>
        <div v-if="isShow" id="mask">
            <!-- <img src="@/assets/images/close.png" alt=""> -->
            <Icon @click="handleMask" class="close" type="ios-close-circle-outline" />

            <div class="maskBox" v-if="caseList.length>0">
                <swiper ref="mySwiper" :options="swiperOption" class="maskSwiper">
                    <swiper-slide v-for="(item, index) in caseList" :key="'pic'+ index">
                        <div class="picBox swiper-zoom-container">
                            <img :src="item" alt="">
                        </div>
                    </swiper-slide>
                    <div style="font-size:16px;color:#aaa" class="swiper-pagination"></div>
                    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
                    <div class="swiper-button-prev"></div>
                    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
                    <div class="swiper-button-next"></div>
                </swiper>
            </div>

            <div class="btn-box">
                <!-- <Button style="margin-right: 20px;" type="primary" @click="scale('f')">放大</Button> -->
                <Button type="warning" @click="scale">放大/缩小</Button>
            </div>


        </div>
    </div>
</template>

<script>
    import {
        swiper,
        swiperSlide,
    } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    export default {
        components: {
            swiper,
            swiperSlide,
        },
        props: {
            caseList: {
                type: Array,
                default: () => []
            },
            isShow: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                // 轮播图配置
                swiperOption: {
                    zoom: {
                        minRatio: 2,
                        maxRatio: 3,
                        toggle: false
                    },
                    effect: 'fade',
                    fadeEffect: {
                        crossFade: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },
                swiper: ''
            }
        },
        methods: {
            handleMask() {
                this.$emit('handleMask')
            },

            scale() {
                this.swiper.zoom.toggle()
            }
        },
        watch: {
            isShow() {
                if (this.isShow) {
                    this.$nextTick(() => {
                        this.swiper = this.$refs.mySwiper.swiper
                    })
                    return false
                }
                this.swiper = ''
            }
        },

    }
</script>

<style lang='less' scoped>
    #mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999999;

        background-color: rgba(0, 0, 0, .8);

        .maskBox {
            width: 80%;
            height: 80vh;
            margin: 50vh auto 0;
            transform: translateY(-50%);

            .maskSwiper {
                width: 100%;
                height: 100%;

                .swiper-slide {
                    height: 100%;
                    width: 100%;

                    .picBox {
                        height: 100%;
                        width: 100%;
                        // position: absolute;
                        // top: 50%;
                        // left: 50%;
                        // transform: translate(-50%, -50%);

                        text-align: center;

                        img {
                            // width: 100%;
                            // height: 100%;

                            // object-fit: contain;
                        }
                    }
                }
            }
        }

        .close {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 50px;

            color: #fff
        }

        .btn-box {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);

        }
    }
</style>